<template>
  <div class="card">
    <router-link :to="'/myCarStickerDetail/' + data.apply_user_id"  class="main">
      <div class="left">
        <img class="adv-image" :src="data.adv_img" alt="" v-imgField/>
      </div>
      <div class="right">
        <p class="adv-title">
          <span>{{ data.adv_title }}</span>
          <span class="apply-status"></span>
        </p>
        <p class="adv-price-num">
        <span class="adv-price">
          <em>￥</em>{{ data.adv_cycle_price.toFixed(2) }}
          <em>/{{data.adv_cycle_type===1 ? '次' : ''}}{{data.adv_cycle_type===2 ? '天' : ''}}</em>
        </span>
          <span class="adv-num">已参与{{data.adv_user_total}}</span>
        </p>
      </div>
    </router-link>
    <slot name="footer"></slot>
  </div>
</template>

<script>
  export default {
    props: {
      data: {}
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/pub";

  .card {
    background-color: #fff;
    .main {
      padding: .25rem;
      display: flex;
      .left {
        width: 3.5rem;
        height: 1.75rem;
        flex: none;

        .adv-image {
          width: 100%;
          height: 100%;
          padding: 0;
          border-radius: .125rem;
        }
      }

      .right {
        padding-left: .25rem;
        width: 100%;
        height: 1.75rem;
        .adv-title {
          font-size: $default_font_size;
          color: $default_title_color;
          height: 1rem;
          line-height: .5rem;
          @include textHideByLine(2);
          .apply-status {
            float: right;
          }
        }
        .adv-price-num {
          margin-top: .25rem;
          height: .5rem;
          line-height: .5rem;
          color: $default_subtitle_color;
          font-size: $default_middlefont_size;
          .adv-price {
            font-size: $default_bigfont_size;
            color: $default_price_color;
            overflow: visible;
            em {
              font-size: $default_smallfont_size;
              font-style: normal;
            }
          }
          .adv-num {
            float: right;
          }
        }
      }
    }
  }
</style>
